<template>
  <div class="dashboard-container">
    <div class="organization">

      <!-- 工作台 -->
      <el-row :gutter="20">

        <!-- 机构概述 -->
        <el-row :gutter="20">

          <el-col :span="10">
            <el-card class="box-card">
              <!-- 机构概述 -->
              <div class="left">

                <div class="left-zhong">
                  <h3>西三旗分拣中心</h3>
                  <div style="color: #828794;">地址：北京顺义区天澜综合保税区123号</div>
                  <div class="left-zuo">负责人：赵五金 12000023591</div>

                  <el-button slot="reference" class="left-chakan" @click="dialogVisible=true">查看营业部分布</el-button>

                </div>
                <div class="zhongxian" />
                <div>
                  <div class="zhongxian1">
                    <span class="span1">分拣中心(个)
                      <h1>1</h1>
                    </span>
                    <span class="span1">营业部(个)  <h1>4</h1></span>
                  </div>
                  <div class="zhongxian1">
                    <span class="span1">司机人数(个) <h1>28</h1></span>
                    <span class="span1">快递员人数(个) <h1>64</h1></span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="2" />
          <!-- 今日数据 -->
          <el-col :span="6">
            <el-card class="box-card1">
              <div class="box-top">
                <span class="box-top1">今日数据</span>
                <span class="box-top2"> <i class="el-icon-refresh " @click="shuaXing" /> {{ currentTime }}</span>
              </div>
              <div class="box-zhong">
                <div class="box-zhong-left">
                  <p>订单金额(元)</p>
                  <h1 class="box-zhong-h1">
                    <CountTo
                      :start-val="0"
                      :end-val=" list.orderAmount"
                      :duration="1000"
                    />
                  </h1>
                  <p v-if="list" class="box-zhong-p">较昨日+ {{ list.orderAmountChanges }} <i class="el-icon-top" /></p>
                </div>
                <div class="box-zhong-left">
                  <p>订单数量(笔)</p>
                  <h1 class="box-zhong-h1">
                    <CountTo
                      :start-val="0"
                      :end-val="list.orderNumber"
                      :duration="1000"
                    />
                  </h1>
                  <p class="box-zhong-p">较昨日 +{{ list.orderNumberChanges }} <i class="el-icon-top" /></p>
                </div>
                <div class="box-zhong-left">
                  <p>运输任务(次)</p>
                  <h1 class="box-zhong-h1">
                    <CountTo
                      :start-val="0"
                      :end-val="list.transportTaskNumber"
                      :duration="1000"
                    />
                  </h1>
                  <p class="box-zhong-p">较昨日 +{{ list.transportTaskNumberChanges }}<i class="el-icon-top" /></p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 待办任务 -->
        <el-row :gutter="20">
          <el-col :span="10">
            <el-card class="box-card">
              <div class="box-top-db">
                <span class="box-top1">待办任务
                  <el-popover
                    placement="bottom"
                    width="400"
                    trigger="hover"
                    content="待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件
                            待派送率=待派送/(待派送+派送中+已签收+拒收)
                            未分配率=未分配/全部数据
                            超时率=超时任务/(已完成+进行中+已取消）"
                  >
                    <i slot="reference" class="el-icon-circle-check" />
                  </el-popover>

                </span>
                <span class="box-top2"> <i class="el-icon-refresh " /> {{ currentTime }}-{{ futureTime }}</span>
              </div>
              <!-- 图表 -->
              <div class="box-div">
                <!-- <shuiBoQiu /> -->
                <div>
                  <!-- <shuiBo  /> -->
                  <shuiBoQiu />
                </div>
                <div>
                  <!-- <shuiBo /> -->
                  <shuiBoQiu />
                </div>
              </div>
              <div class="box-top-ZX-right">
                <el-button class="box-top-ZX-button1" @click="$router.push('/orderManagement')">待取件 <span style="color:#e2b85c">39</span></el-button>

                <el-button class="box-top-ZX-button1" @click="$router.push('/orderManagement')">待派件 <span style="color:#e2b85c">18</span> </el-button>

                <el-button class="box-top-ZX-button1" @click="$router.push('/transportation')">未分配运输 <span style="color:#e2b85c">4</span></el-button>
                <el-button class="box-top-ZX-button1" @click="$router.push('/transportation')">未分配运输 <span style="color:#e2b85c">4</span></el-button>

              </div>

            </el-card>
          </el-col>
          <el-col :span="2" />
          <el-col :span="6"> <el-card class="box-card1">
            <div class="box-top-ZX">
              <span class="box-top1">执行中任务
                <el-popover
                  placement="bottom"
                  width="300"
                  trigger="hover"
                  content="运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）
                        派送率=派送中/(待派送+派送中+已签收+拒收）"
                >
                  <i slot="reference" class="el-icon-circle-check" />
                </el-popover>

              </span>
              <span class="box-top2"> <i class="el-icon-refresh " /> {{ currentTime }}</span>
            </div>
            <div>
              <shuiBo />
            </div>
            <div class="box-top-ZX-right">
              <el-button class="box-top-ZX-button" @click="$router.push('/orderManagement')">运输中 <span style="color:#f9cc9d">53</span></el-button>
              <el-button class="box-top-ZX-button" @click="$router.push('/orderManagement')">派送中 <span style="color:#43bafc">34</span> </el-button>
            </div>
          </el-card></el-col>
        </el-row>
        <!-- 常用功能 -->
        <el-row :gutter="20">
          <el-card class="box-card3">
            常用功能
            <div class="box-card3-flex">
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-box eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/parcelManagement')">快递作业</el-button>
                </div>
              </div>
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-box eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/transportation')">运输任务</el-button>
                </div>
              </div>
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-set-up eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/lineManagement')">线路管理</el-button>
                </div>
              </div>
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-mobile eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/cheHangList')">车辆管理</el-button>
                </div>
              </div>
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-user eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/expreManagement')">司机管理</el-button>
                </div>
              </div>
              <div>
                <div class="box-card3-i">
                  <i class="el-icon-receiving eladd" />
                  <el-button class="box-card3-dev" @click="$router.push('/organization')">运费查询</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-row>
        <!-- 线路管理 -->
        <el-row :gutter="20">
          <div class="box-card-xl">
            <el-card class="box-card4">
              <span> 线路管理 </span>
              <diTu />
            </el-card>
            <el-card class="box-card5">
              <div>
                <span>运输任务</span>
                <el-button class="chaKan" @click="$router.push('/transportation')">查看更多 <i class="el-icon-arrow-right " /></el-button>
              </div>
              <div>
                <el-table
                  ref="rolltable"
                  :data="tableData"
                  style="width: 100%"
                  height="450px"
                >
                  <el-table-column
                    prop="id"
                    label="任务编号"
                    width="120"
                  >
                    <template slot-scope="{ row }">
                      {{ hideExcessData(row.id) }}
                    </template></el-table-column>

                  <el-table-column
                    prop="startAgency"
                    label="起始地"
                    width="120"
                  />
                  <el-table-column
                    prop="endAgency"
                    label="目的地"
                    width="110"
                  />
                  <el-table-column
                    prop="licensePlate"
                    label="车辆"
                    width="95"
                  />
                  <el-table-column
                    prop="status"
                    label="任务状态"
                    width="80"
                  >
                    <template v-slot="{ row }">
                      <span v-if="row.status === 1">待执行</span>
                      <span v-if="row.status === 2">进行中</span>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 表格外部容器 -->
              </div>
            </el-card>
          </div>

        </el-row>
        <!-- 订单总量 -->
        <el-row :gutter="20">
          <div class="box-card-ZL">
            <el-card class="box-card4">
              <span class="box-card-ZL-dd"> 订单总量 </span>
              <span class="box-card-ZL-sj">2023-03-2023-08</span>
              <p>单位：笔</p>
              <div class="box-card5-div">
                <div class="box-card5-div-div">
                  <h1 class="box-ZL-h1">
                    <CountTo
                      :start-val="0"
                      :end-val=" listData.orderMaxNumber"
                      :duration="1000"
                    />
                  </h1>
                  <p>订单最高值</p>
                </div>
                <div class="box-card5-div-div">
                  <h1 class="box-ZL-h1">
                    <CountTo
                      :start-val="0"
                      :end-val=" listData.orderAverageNumber"
                      :duration="1000"
                    />
                  </h1>
                  <p>订单平均值</p>
                </div>
                <div class="box-card5-div-div">
                  <h1 class="box-ZL-h1">
                    <CountTo
                      :start-val="0"
                      :end-val=" listData.orderMinNumber"
                      :duration="1000"
                    />
                  </h1>
                  <p>订单最低值</p>
                </div>
              </div>
              <dingDan v-if="homeData.length" :home-data="homeData" />

            <!-- 图表 -->

            </el-card>
            <el-card class="box-card5">
              <div>
                <span class="box-card-ZL-dd">订单发布</span>
                <span class="box-card-ZL-sj">2023-03-2023-08</span>
                <p>单位：笔</p>
                <!-- 图表 -->
                <zhuZhang />
              </div>
            </el-card>
          </div>

        </el-row>

        <!-- 机构概述弹框 -->
        <el-dialog
          :visible.sync="dialogVisible"
          custom-class="image-dialog"
          :close-on-click-modal="false"
          class="image1"
        >
          <img src="@/assets/ditu.png" class="dialog-image image2" alt="Image">
        </el-dialog>
      </el-row></div>

  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getWorkspace } from '@/api/dashboard/workBench'
import dingDan from '@/views/dashboard/components/dingDan.vue'
import diTu from '@/views/dashboard/components/diTu.vue'
import zhuZhang from '@/views/dashboard/components/zhuZhang.vue'
import shuiBo from '@/views/dashboard/components/shuiBo.vue'
import shuiBoQiu from '@/views/dashboard/components/shuiBoQiu.vue'

export default {
  name: 'Dashboard',
  components: {
    CountTo,
    dingDan,
    diTu,
    zhuZhang,
    shuiBo,
    shuiBoQiu

  },
  data() {
    return {
      dialogVisible: false,
      dateTime: '', // 实时时间
      futureDays: 2, // 未来两天
      list: [], // 今日数据
      tableData: [], // 原始数据数组
      visibleData: [], // 可见数据数组
      listData: [], // 订单数据
      homeData: {}, // 存放图表数据的对象
      currentIndex: 0, // 当前滚动到的索引
      timer: null // 计时器对象

    }
  },
  computed: {
    // 当前时间
    currentTime() {
      return this.formatDate(new Date()) // 获取当前时间并格式化
    },
    // 未来两天时间
    futureTime() {
      const futureDate = new Date()
      futureDate.setDate(futureDate.getDate() + this.futureDays) // 计算未来两天的日期
      futureDate.setHours(23, 59, 0, 0) // 将时间设置为23:59:00
      return this.formatDate(futureDate) // 返回截断后的日期时间并格式化
    }

  },
  mounted() {
    // 到表格挂载后的真实DOM
    const table = this.$refs.rolltable
    // 到表格中承载数据的div 元素
    const divData = table.bodyWrapper
    // 滚动到顶部
    divData.scrollIntoView({ behavior: 'smooth' })

    setInterval(() => {
    // 假设每次滚动30像素
      divData.scrollTop += 50

      // 判断是否滚动到底部
      if (divData.scrollTop + divData.clientHeight >= divData.scrollHeight) {
      // 回到顶部
        divData.scrollTop = 0
      }
    }, 1500)
  },
  async created() {
    this.getWorkspace()
    const res = await getWorkspace()
    this.tableData = res.transportTaskList
    this.tableData.push(
      { id: '78797879988', startAgency: '天津转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 1 },
      { id: '28797879988', startAgency: '长沙转运中心', endAgency: '北京转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '58797879988', startAgency: '武汉转运中心', endAgency: '天津转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '68797879988', startAgency: '天津转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 1 },
      { id: '98797879988', startAgency: '长沙转运中心', endAgency: '天津转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '38797879988', startAgency: '武汉转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '78797879988', startAgency: '武汉转运中心', endAgency: '天津转运中心', licensePlate: '京A 891231', status: 1 },
      { id: '28797879988', startAgency: '天津转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '58797879988', startAgency: '天津转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '68797879988', startAgency: '北京转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 1 },
      { id: '98797879988', startAgency: '天津转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 2 },
      { id: '38797879988', startAgency: '北京转运中心', endAgency: '武汉转运中心', licensePlate: '京A 891231', status: 2 }
    )
    this.listData = res.orderLineChart
    this.homeData = res.orderLineChart.monthlyOrderList
  },

  beforeDestroy() {
    clearInterval(this.timer) // 清除计时器，防止内存泄漏
  },
  methods: {
    // s时间
    formatDate(date) {
      const year = date.getFullYear()
      const month = this.padZero(date.getMonth() + 1)
      const day = this.padZero(date.getDate())
      const hour = this.padZero(date.getHours())
      const minute = this.padZero(date.getMinutes())
      return `${year}-${month}-${day} ${hour}:${minute}` // 格式化日期和时间
    },
    // 刷新
    shuaXing() {
      this.getWorkspace()
    },
    // 不满两位的数字前面补零
    padZero(value) {
      return value < 10 ? `0${value}` : value
    },
    // 今日数据
    async getWorkspace() {
      const res = await getWorkspace()
      this.list = res.todayData
    },
    // 隐藏id超出8位
    hideExcessData(data) {
      if (data.length > 8) {
        const hiddenData = data.substr(0, 8) + '...'
        return hiddenData
      } else {
        return data
      }
    },

    startAnimation() {
      this.visibleData = [this.tableData[0]] // 初始显示第一条数据
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.tableData.length // 计算下一条数据的索引
        this.visibleData = [this.tableData[this.currentIndex]] // 更新显示数据
      }, 1000)
    }

  }

}
</script>

<style lang="scss" scoped>
.organization{
.box-card{
   width: 700px;
   height: 300px;
   margin: 20px 30px;
}
// 今日数据
.box-card1{
   width: 400px;
   height: 300px;
   margin: 20px 250px;
   .box-top1{
    font-weight: 800;
    font-size: 15px;
   }
  .box-top2{
    margin-left: 140px;
   }
   .el-icon-refresh{
      font-weight: 800;
    color: #e15536;
    margin-right: 5px;
   }

}
// 代办任务
.box-top-db{
  .box-top1{
    font-weight: 800;
    font-size: 15px;
   }
  .box-top2{
    margin-left: 295px;
   }

  .el-icon-refresh{
    font-weight: 800;
    color: #e15536;
    margin-right: 5px;
   }

}
// 执行任务
.box-top-ZX{
  .box-top1{
    font-weight: 800;
    font-size: 15px;
   }
  .box-top2{
    margin-left: 110px;
   }

  .el-icon-refresh{
    font-weight: 800;
    color: #e15536;
    margin-right: 5px;
   }
   .box-top-ZX-right{

    margin-left: 30px;

   }
}
// 常用功能
.box-card3{
  font-weight: 800;
  .box-card3-flex{
    display: flex;
  }
  margin-left: 40px;
  width: 1160px;
  height: 200px;
  .box-card3-i{
    width: 140px;
    height: 120px;
    margin-top: 10px;
    margin-left: 40px;
    text-align: center;
    line-height: 50px;
    background-color: #fafafb;
    .eladd{
      font-size: 30px;
      margin-top: 10px;
    }
    .box-card3-dev{
      display:flex;
      margin-left: 28px;
      font-weight: 800;
      color: #000;
      border: 1px solid #fafafb;
      font-weight: 800;
      background-color: #fafafb;
    }
   .box-card3-dev:hover{
        color: #e15536;
    }
  }
}
 // 线路
.box-card-xl{
  margin-left:40px;
  margin-top: 40px;

  display: flex;
}
.box-card4{
  width: 550px;
  height: 500px;

}
.box-card5{
  margin-left:15px ;
  width: 570px;
  height: 500px;
  .chaKan{
    margin-left: 320px;
    border: 1px solid #ffff;
  }

}
// 订单总量
.box-card-ZL{
 margin-left:40px;
  margin-top: 20px;
  display: flex;
  .box-card5-div{
    width: 80px;
    display: flex;
  .box-card5-div-div{
    margin-left: 30px;
    margin-right: 30px;
  }
  .box-ZL-h1{
    display: block;
    width: 100px;
  }

  }
   .box-card-ZL-dd{
    font-size: 17px;
    font-weight: 800;
  }
   .box-card-ZL-sj{
    margin-left: 310px;
  }
  .chart{
    width: 200px;
    height: 200px;
  }
}
.left{
  display: flex;
}
.left-zhong{
  width: 350px;
}
.zhongxian{
  border: 1px solid #f3f5f9;
}
.span1{
  display: block;
  width: 120px;
  height: 100px;
  margin-left: 50px;

}
.zhongxian1{
  margin-top: 20px;
  display: flex;
}
h1{
  color: red;
}
.left-zuo{
  margin: 20px 0px;
  color: #828794;
}
.left-chakan{
  margin: 20px 40px;
  border: 1px solid #e15536;
  background-color: #ffeeeb;
  color:#e15536 ;
}
.left-chakan:hover {
background-color: #ff6b4a;
color: #f3f5f9;

}
.image2{
  width: 48vw;
  height: 700px;
}
.box-zhong{
  display: flex;
  .box-zhong-left{
    width: 120px;
    height: 170px;
    margin: 40px 12px 0;
  }
  .box-zhong-h1{
    color: #000;
    margin: 40px 0;
  }
  .box-zhong-p{
    font-size: 12px;
    color: #828794;
  }
  .el-icon-top{
    color: #e15536;
    font-weight: 800;
  }
}
.scoreChart{
  width: 200px;
  height: 200px;
}
}
.box-top-ZX-button{
      margin-left: 50px;
      border: 1px solid #fff;

}

.box-div{
display: flex;
}
.box-top-ZX-button1{
    margin-left: 48px;
      border: 1px solid #fff;
}
// .no-scrollbar{
//    overflow-y: hidden;
// }

::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
}

</style>
